<template>
  <div>
    <el-container>
      <el-header height="20px">
        <el-text class="mx-1" size="large">样本数据情况</el-text>
      </el-header>
      <el-main>
        <div>
          <el-table class="table_class" height="435" :data="data" border>
            <el-table-column fixed="left" prop="mtDNA_ID" width="180" label="id" />
            <el-table-column prop="kit" width="180" label="试剂盒" />
            <el-table-column prop="average_depth" label="平均深度" />
            <el-table-column prop="haplogroup" label="单倍群" />
          </el-table>
        </div>
        <div class="footer_data" >
          共&nbsp;{{ items }}&nbsp;项
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// eventBus 用来在兄弟之间传值，但因组件生命周期原因，暂时弃用
import eventBus from "../../assets/eventBus";
export default {
  name: "table",
  data() {
    return {
      // 模拟数据
      data: [
        {
          "mtDNA_ID": "MT001",
          "kit": "Kit A",
          "average_depth": 30.5,
          "haplogroup": "H"
        },
        {
          "mtDNA_ID": "MT002",
          "kit": "Kit B",
          "average_depth": 28.2,
          "haplogroup": "U5"
        },
        {
          "mtDNA_ID": "MT003",
          "kit": "Kit A",
          "average_depth": 32.7,
          "haplogroup": "J"
        },
        {
          "mtDNA_ID": "MT004",
          "kit": "Kit C",
          "average_depth": 29.4,
          "haplogroup": "T"
        },
        {
          "mtDNA_ID": "MT005",
          "kit": "Kit B",
          "average_depth": 27.1,
          "haplogroup": "HV"
        },
        {
          "mtDNA_ID": "MT006",
          "kit": "Kit C",
          "average_depth": 31.8,
          "haplogroup": "V"
        },
        {
          "mtDNA_ID": "MT007",
          "kit": "Kit A",
          "average_depth": 33.9,
          "haplogroup": "K"
        },
        {
          "mtDNA_ID": "MT008",
          "kit": "Kit B",
          "average_depth": 26.3,
          "haplogroup": "H"
        },
        {
          "mtDNA_ID": "MT009",
          "kit": "Kit C",
          "average_depth": 30.0,
          "haplogroup": "U"
        },
        {
          "mtDNA_ID": "MT010",
          "kit": "Kit A",
          "average_depth": 34.5,
          "haplogroup": "X"
        },
        {
          "mtDNA_ID": "MT009",
          "kit": "Kit C",
          "average_depth": 30.0,
          "haplogroup": "U"
        },
        {
          "mtDNA_ID": "MT010",
          "kit": "Kit A",
          "average_depth": 34.5,
          "haplogroup": "X"
        },
        {
          "mtDNA_ID": "MT009",
          "kit": "Kit C",
          "average_depth": 30.0,
          "haplogroup": "U"
        },
        {
          "mtDNA_ID": "MT010",
          "kit": "Kit A",
          "average_depth": 34.5,
          "haplogroup": "X"
        },
      ]
    }
  },
  computed: {
    // 计算数据项大小
    items() {
      return this.data.length;
    }
  }
}
</script>

<style>
.table_class {
  width: 100%
}

.footer_data {
  margin: 2%;
  font-size: small
}
</style>